import React, { Component } from 'react';
import { HashRouter, Route, NavLink, Switch} from 'react-router-dom';
import HotJobs from './pages/HotJobs';
import SignUpList from './pages/SignUpList';
import HotCompanyList from './pages/HotCompanyList';
import Footer from './pages/components/Footer';
import Meet from './pages/Meet'

import './static/css/animate.min.css'
import './static/css/public.css'
import './static/css/main.css'


const Pages = () => (
  <div>
    <Route exact path='/' component={ HotJobs }/>
    <Route exact path='/signuplist' component={ SignUpList }/>
    <Route exact path='/meet' component={ Meet } />
  </div>
)
const Main = () => (
  <div className="w">
    <div className="header">
      <a href="http://job.lockinchina.com">首页</a>
      <img  alt="banner" src={require('./static/images/banner.png')} />
      </div>
    <ul className="nav" >
      <li><NavLink exact activeClassName="active" to="/">热门职位申请</NavLink></li>
      <li><NavLink exact to="/signuplist">校园求职Workshop和校园面试会报名</NavLink></li>
      <li><NavLink exact to="/meet" >Meet Employers</NavLink></li>
    </ul>
    <Pages />
    <Footer />
  </div>
)

const HotCompanyPage = () => (
  <Route exact path='/hotcompanylist' component={ HotCompanyList }/>
)

class App extends Component {
  render() {
    return (
      <HashRouter>
        <div>
          <Switch >
            <Route exact path='/' component={ Main }/>
            <Route exact path='/signuplist' component={ Main }/>
            <Route exact path='/meet' component={Main} />
            <HotCompanyPage exact path='/hotcompanylist' />
          </Switch>
        </div>
      </HashRouter>
    );
  }
}

export default App;
